<template>
	<view>
		<view>
			<view class="bgc">
				<!-- 头部背景 -->
				<image class="img-top" src="https://gbay.dcyu.com/uploads/images/personal-shop_bg2.png" mode="widthFix"></image>
				<view class="box">
					<view class="box-head">
						<text>{{i18n.Yiyou}}<text>8888</text>{{i18n.UserLeiji}}</text>
					</view>
					<view class="box-body">
						<view class="box-body-title">{{i18n.Quanyi}}</view>
						<view class="box-body-list">
							<view class="list"  v-for="(item,index) in list" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
					<view class="box-botton">
						<view class="box-body-title">{{i18n.Chenjian}}</view>
						<text class="ask">{{i18n.Wan}}</text></br>
						<text class="da">{{i18n.Da}}</text>
					</view>
				</view>
			</view>
			<view class="box-btn">
				<label class="radio">
					<checkbox @click="getbtn=!getbtn" /><text>{{i18n.Yiyuedu}}</text><i>{{i18n.Fuwu}}</i>
				</label>
				<button class="btn" type="primary" @click="btn">{{i18n.Mianfei}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	const globalData = getApp().globalData;
	import {Freeopenashop} from '@/api/store.js';
	export default {
		data() {
			return {
				getbtn:false,
				list:[
					{
						id:1,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon1.png",
						text:globalData.$t('common_type').Mianfei
					},
					{
						id:2,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon2.png",
						text:globalData.$t('common_type').Jianli
					},
					{
						id:3,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon3.png",
						text:globalData.$t('common_type').Chunxiang
					},
					{
						id:4,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon4.png",
						text:globalData.$t('common_type').Dazhe
					},
					{
						id:5,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon5.png",
						text:globalData.$t('common_type').Zigou
					},
					{
						id:6,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon6.png",
						text:globalData.$t('common_type').Zhaungqian
					},
					{
						id:7,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon7.png",
						text:globalData.$t('common_type').Jux
					},
					{
						id:8,
						img:"https://gbay.dcyu.com/uploads/images/personal-shop_icon8.png",
						text:globalData.$t('common_type').Fuli
					}
				]
			}
		},
		computed: {
		   i18n() {
		    return globalData.$t('common_type');
		   },
		  },
		methods: {
			btn:function(){
				Freeopenashop().then(res=>{
					console.log(res)
					if(res.status ==200){
						if (!this.getbtn) {
							this.$util.Tips({
								title:this.i18n.Tongyi,
							});
							return false
						}else{
							this.$util.Tips({
								title: res.message
							});
						};
					}
					setTimeout(function(){
						uni.navigateTo({
							url: `/pages/store/pay-succeed/index`
						})
					},500)
				}).catch(err => {
					console.log(err)
					this.$util.Tips({
						title: err
					})
				})
			}
		}
	}
</script>

<style lang="less">

.bgc{
	position: relative;
	height: 1560rpx;
	background-color: #FAEBD8;
}

.img-top{
	width: 100%;
}

.box{
	position: absolute;
	top: 500rpx;
	width: 100%;
	padding: 30rpx;
}

.box-head,
.box-body,
.box-botton{
	margin:0 0 20rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}

.box-head{
	height: 239rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text{
		text-align: center;
		display: inline-block;
		line-height:70rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		text{
			font-size: 70rpx;
			color: red;
		}
	}
}

.box-body{
	padding-top: 30rpx;
	height: 460rpx;
	font-weight: bolder;
}

.box-body-title{
	padding: 0 0 44rpx 30rpx !important;
	font-size: 32rpx;
	font-weight: bold;
	color: #222222;
}

.box-body-list{
	display: flex;
	flex-wrap: wrap;
	.list{
		text-align: center;
		line-height: 30rpx;
		width: 25%;
		height: 140rpx;
		margin-bottom: 40rpx;
		image{
			height: 86rpx;
			width: 86rpx;
		}
		text{
			display: inline-block;
			font-size: 24rpx;
		}
	}
}


	
.box-botton{
	padding: 30rpx;
	height: 320rpx;
	.box-body-title{
		padding: 0 0 30rpx 0 !important; 
	}
	.ask{
		font-size: 30rpx;
		line-height: 50rpx;
		color: #666666;
		font-weight: bold;
	}
	.da{	
		font-size: 28rpx;
		line-height: 50rpx;
		color: #666666;
	}
}
.box-btn{
	padding:26rpx 0;
	height: 200rpx;
	background-color: #FFFFFF !important;
	.btn{
		margin: 26rpx 60rpx 0;
		height: 80rpx;
		background: linear-gradient(90deg, #F76D3C 0%, #FD342A 100%);
		line-height: 80rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.radio{
		margin-left: 60rpx;
		font-size: 24rpx;
		text{color: #666666;}
		i{display: inline-block; color: #FD342A;}
	}
}
</style>
